<script lang="ts" setup name="ndeCommissionNdeCommission">
import { changeNdeCommissionStatus, getListByConditionsWithPage, urls } from '@/index';
import type {
  DialogModel,
  NdeCommissionNdeCommission,
  NdeCommissionNdeCommissionQueryCondition,
  NdeCommissionStatus
} from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
import ProcessFlowDraw from './ProcessFlowDraw.vue';

const props = defineProps({
  ndeCommissionStatus: {
    type: Object as PropType<NdeCommissionStatus>
  },
  ndeCommissionTitle: {
    type: String,
    default: '委托'
  }
});
const title = props.ndeCommissionTitle;
const queryCondition = reactive<NdeCommissionNdeCommissionQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20,
  commissionStatus: props.ndeCommissionStatus
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.deleted = false;
  delete queryCondition.productionReference;
  delete queryCondition.method;
};

const {
  data: getMainTableListData,
  run: getMainTableListRun,
  loading: getMainTableListLoading
} = useRequest(() => getListByConditionsWithPage(urls.ndeCommissionNdeCommission, queryCondition));

const handleResetQuery = () => {
  resetQueryCondition();
  getMainTableListRun();
  currentCommission.value = {};
};

const detailDialogModel = reactive<DialogModel<NdeCommissionNdeCommission>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getMainTableListRun();
      detailDialogModel.change = false;
    }
  }
);

const currentCommission = ref<NdeCommissionNdeCommission>();
const handleRowClick = (row: NdeCommissionNdeCommission) => {
  currentCommission.value = row;
};

const operateCallback = () => {
  getMainTableListRun();
  currentCommission.value = {};
};
const processFlowDrawModel = reactive<DialogModel<NdeCommissionNdeCommission>>({
  visible: false,
  id: 0,
  title: '',
  type: 'view',
  change: false
});
</script>
<template>
  <HqContainerTable
    :base-url="urls.ndeCommissionNdeCommission"
    :title="title"
    :loading="getMainTableListLoading"
    :total="getMainTableListData?.total"
    :table-data="getMainTableListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getMainTableListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getMainTableListRun"
    @handle-row-click="handleRowClick"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
    logic-delete
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.productionReference"
          placeholder="请选择生产令号"
          clearable
          filterable
          @change="getMainTableListRun"
        >
          <HqProjectProductionReference />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.method"
          clearable
          placeholder="请选择方法"
          @change="getMainTableListRun"
        >
          <HqNdeMethodOptions />
        </el-select>
      </hq-col>
    </template>

    <template #button v-if="props?.ndeCommissionStatus">
      <el-button
        v-if="currentCommission?.id && currentCommission?.commissionStatus === '起草委托'"
        type="primary"
        @click="changeNdeCommissionStatus(currentCommission?.id, '待派委托', operateCallback)"
      >
        推送委托
      </el-button>
      <el-button
        v-if="currentCommission?.id && currentCommission?.commissionStatus === '待派委托'"
        type="primary"
        @click="changeNdeCommissionStatus(currentCommission?.id, '委托退回', operateCallback)"
      >
        委托退回
      </el-button>
      <el-button
        v-if="currentCommission?.id && currentCommission?.commissionStatus === '待派委托'"
        type="primary"
        @click="changeNdeCommissionStatus(currentCommission?.id, '执行委托', operateCallback)"
      >
        领取任务
      </el-button>
      <el-button
        v-if="currentCommission?.id && currentCommission?.commissionStatus === '委托退回'"
        type="primary"
        @click="changeNdeCommissionStatus(currentCommission?.id, '待派委托', operateCallback)"
      >
        推送委托
      </el-button>
      <el-button
        v-if="
          currentCommission?.id &&
          currentCommission?.commissionStatus != '委托完成' &&
          currentCommission?.commissionStatus != '委托作废'
        "
        type="primary"
        @click="changeNdeCommissionStatus(currentCommission?.id, undefined, operateCallback)"
      >
        作废委托
      </el-button>
    </template>

    <template #tableColumns>
      <HqTableColumn label="查看流程" :min-width="50">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            @click="
              processFlowDrawModel.visible = true;
              processFlowDrawModel.id = row?.id as number;
            "
            >查看流程</el-button
          >
        </template>
      </HqTableColumn>
      <HqTableColumn label="检测方法" prop="method" :min-width="50" />
      <HqTableColumn label="委托状态" prop="commissionStatus" :min-width="50" />
      <HqTableColumn label="生产令号" prop="productionReference" :min-width="100" />
      <HqTableColumn label="工件名称" prop="partName" :min-width="100" />
      <HqTableColumn label="工件编号" prop="partReference" :min-width="100" />
      <HqTableColumn label="数量" prop="partQuantity" :min-width="100" />
      <HqTableColumn label="检测时机" prop="testStage" :min-width="100" />
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
  <ProcessFlowDraw v-model:model-value="processFlowDrawModel" v-if="processFlowDrawModel.visible" />
</template>
<style lang="scss" scoped></style>
